<form class="layui-form layui-user-from" method="post">
    <div class="layui-row">
        <div class="layui-col-md3 layui-col-sm12">
            <div class="layui-form-item">
                <label class="layui-form-label">合同编号</label>
                <div class="layui-input-block">
                    <input type="text" name="contractNumber"   placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm12">
            <div class="layui-form-item">
                <label class="layui-form-label">客户名称</label>
                <div class="layui-input-block">
                    <input type="text" name="clientName"   placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm layui-bg-lightblue" lay-submit lay-filter="agreementSearch">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">清空</button>
                </div>
            </div>
        </div>
    </div>
</form>
<table  id="contactId"></table>
<script type="text/html" id="contacttToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-bg-lightblue" lay-event="getCheckData">新增合同</button>
        <button class="layui-btn layui-btn-sm layui-bg-gray" lay-event="getCheckLength">批量删除</button>
    </div>
</script>
<script>
    layui.use(['layer','form', 'table','miniPage','element', 'laydate'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            laydate = layui.laydate;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        /**
         * 日期范围
         **/
        laydate.render({
            elem: '#dateRange'
            ,range: true
        });

        /**
         * 数据快速查看
         **/
        var tableIns = table.render({
            elem: '#contactId',
            url: 'api/customer/agreement.json',
            toolbar: '#contacttToolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: [],
            skin: 'line',
            cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {field: 'id', align:'center', title: '合同ID', sort: true},
                    {field: 'contractNumber',align:'center', title: '合同编号'},
                    {field: 'clientId', align:'center',  title: '客户编号'},
                    {field: 'clientName', align:'center',  title: '客户名称'},
                    {field: 'legalEntity', align:'center',  title: '法务实体'},
                    {field: 'teamId', align:'center',  title: '部门编号'},
                    {field: 'startingDate',  title: '开始日期'},
                    {field: 'endingDate',  title: '结束日期'},
                    {field: 'ownerBy', align:'center',  title: '负责人'},
                    {field: 'createBy',  title: '创建者'},
                    {title: '操作',  fixed: "right", align: "center", templet: function(d){
                            return '<button class="layui-btn layui-btn-xs layui-btn-primary">编辑</span>';
                        }
                    }
                ]
            ],
            page: true, //开启分页
            request: {
                pageName: 'pageIndex', // page
                limitName: 'pageSize' // limit
            }
            ,response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
        });
        form.on('submit(agreementSearch)', function(data){
            data.field.pageIndex = 1;
            tableIns.reload({
                where: data.field
            });
            return false;
        });
    });
</script>